<template>
  <div class="song-list-album">
    <div class="album-slide">
      <div class="album-img">
        <img width="310px" height="310px" :src="attachImageUrl(avator)">
      </div>
      <br>
      <br>
      <div class="album-img">
        <img width="310px" height="310px" :src="attachImageUrl(secondAvator)">
      </div>
      <div class="album-info">
        <h4>识别时间：</h4>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;{{dateDeal(tempList.createTime)}}</span>
        <h4>麦穗总数：</h4>
        <span>&nbsp;&nbsp;&nbsp;&nbsp; {{tempList.wheatSum || "正在识别中。。。。。"}}</span>
        <el-button @click="correctFinish" style="margin-left: 60px;margin-bottom: 10px"  type="success"> 纠错完成
        </el-button>
        <!--<h4>亩产估测：</h4>
        <span>&nbsp;&nbsp;&nbsp;&nbsp; {{tempList.harvest || "亩产估测。。。。。"}}</span>-->
      </div>
    </div>
    <div class="album-content">
      <div class="songs-body">
        <album-content :songList="listOfSongs">
          <template slot="title">小图列表</template>
        </album-content>
      </div>
    </div>
    <el-dialog title="完成纠错" :visible.sync="completeDialogVisible" width="400px" center>
      <div align="center">这张图片将更改状态为修改完成的，请点击确定或者取消</div>
      <span slot="footer">
       <el-button size="mini" @click="completeDialogVisible=false">取消</el-button>
       <el-button size="mini" @click="changeComplete">确定</el-button>
     </span>
    </el-dialog>
  </div>
</template>
<script>
  import {mixin} from '../mixins';
  import {mapGetters} from 'vuex';
  import {listIdentifyDetail, detailOfDetailId, correctCompelet} from '../api/index';
  import AlbumContent from "../components/AlbumContent";

  export default {
    name: 'identify-album',
    mixins: [mixin],
    components: {
      AlbumContent,
    },
    data() {
      return {
        hasIdentify: false,
        avator: '',
        secondAvator: '',
        detailsLists: [],      //当前页面需要展示的歌曲列表
        identifyId: '',    //前面传来的歌单id
        completeDialogVisible: false
      }
    },
    computed: {
      ...mapGetters([
        'listOfSongs',      //当前播放列表
        'tempList',         //当前歌单对象
        'loginIn',          //用户是否已登录
        'userId',           //当前登录用户id
      ])
    },
    created() {
      this.identifyId = this.$route.params.id;
      this.avator = '/identify/get_pic/' + this.$route.params.id;
      this.secondAvator = '/identify/get_crop_pic/' + this.$route.params.id;
      this.getDetailsId();

    },
    methods: {
      changeComplete() {
        this.completeDialogVisible = false;
        correctCompelet(this.identifyId, 2);
        this.notify("修改成功", "success");
      },
      correctFinish() {
        this.completeDialogVisible = true;
      },
      dateDeal(utc_datetime) {
        //2020-11-30T11:14:37.456
        // 转为正常的时间格式 年-月-日 时:分:秒
        if (utc_datetime) {
          let T_pos = utc_datetime.indexOf('T');
          // let Z_pos = utc_datetime.indexOf('Z');
          let Z_pos = utc_datetime.length;
          let year_month_day = utc_datetime.substr(0, T_pos);
          let hour_minute_second = utc_datetime.substr(T_pos + 1, Z_pos - T_pos - 5);
          return year_month_day + " " + hour_minute_second; // 2017-03-31 08:02:06
        } else {
          return utc_datetime
        }
      },
      //获取当前歌单的歌曲列表
      getDetailsId() {
        listIdentifyDetail(this.identifyId)
          .then(res => {  // 这里返回的是identify-details列表
            for (let item of res.data) {
              this.getDetailsList(item);  // 这里用id填充details细节
            }
            this.$store.commit('setListOfSongs', this.detailsLists);
          })
          .catch(err => {
            console.log(err)
          })
      },
      //根据歌曲id获取歌曲信息
      getDetailsList(id) {
        detailOfDetailId(id)
          .then(res => {
            this.detailsLists.push(res.data);
          })
          .catch(err => {
            console.log("发生错误")
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '../assets/css/song-list-album.scss';
</style>
